<template>
    <div class="bi-checkbox " :class="dir=='row'?'checkbox-row':''">
        <label class="form-check" v-for="(item,index) in optionsList" :key="index">
            <input type="checkbox"  :disabled="disabled || item.disabled" class="form-check-input" :id="id" :name='id' :value="item.value" v-model="value" />
            <bi-icon :data="item.icon" :style="iconStyle" v-if="item.icon" ></bi-icon>
            <span class="form-check-label"  :style="labelStyle">{{item.label}}</span>
        </label>
    </div>
</template> 

<script>
import FieldMixin from '../fieldMixin.js';
import OptionMixin from '../optionMixin.js';
export default {
    mixins:[FieldMixin,OptionMixin],
    props:{
        valueSplit:{
            type:String,
            default:','
        },
        labelStyle:{
            type:Object,
            default:{
            }
        },
        dir:{
            type:String,
            default:'row'
        }
    },
    data(){
        return {
            valueType:'string',
        }
    },
    computed:{
        value:{
            get(){
                if (typeof this.modelValue =='string'){
                    this.valueType ='string';
                    return this.modelValue.split(this.valueSplit);
                }

                //判断是不是数组
                if (this.modelValue instanceof Array){
                    this.valueType ='array';
                    return this.modelValue;
                }
                
                return [];
            },
            set(val){

                //第一个元素存在空值，没有找到原因，直接删除里面的空值 1
                val = val.filter(item=>{return item!=='';});
                
                let value;
                if (this.valueType =='array'){
                    value = val;
                }else{
                    value = val.join(this.valueSplit);
                }
              
                this.$emit('update:modelValue',value);
                this.$emit('change',value);
                this.valueChange(value);
            }
        },
    },
    methods:{}
}
</script>


<style>
.bi-checkbox{
    padding: var(--bs-field-padding);
}
.bi-checkbox.checkbox-row{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.bi-checkbox.checkbox-row .form-check{
    margin-right: 20px;
    
}
</style>